<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>公易贷前期成本</title>
    <style>
      body {
        margin: 0;
        padding: 2rem;
        font-size: 1rem;
      }
      form {
        margin-bottom: 20px;
      }
      label {
        display: block;
        font-weight: bold;
      }
      h2 {
        margin: 0 auto 20px;
      }
      .fsc {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .mb20 {
        margin-bottom: 20px;
      }
      .item {
        display: flex;
        flex-direction: column;
        line-height: 2;
        margin-bottom: 1rem;
      }
      .label {
        min-width: 130px;
      }
      input,
      select {
       width: 100%;
        padding: 1rem;
        box-sizing: border-box;
      }
      .button {
        padding: 1rem;
        margin-top: 2rem;
        background-color: #f03131;
        color: #ffffff;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }
      .resultWrap {
        display: none;
        position: absolute;
        left: 2rem;
        right: 2rem;
        top: 2rem;
        border: 1px solid #ffd7a8;
        padding: 1.5rem;
        border-radius: 5px;
        background: #fff8f0;
      }
      .tip {
        color: #333;
        margin-top: 1rem;
      }
      .money {
        width: 20px;
      }
      .warning {
        margin-top: 20px;
        font-size: 14px;
        color: #333;
      }
      .total_cost {
        color: #ff0000;
        font-weight: bold;
      }
      .close {
        position: absolute;
        right: 1rem;
        top: 1rem;
      }
      .close2 {
        display: block;
        width: 50%;
        margin: 2rem auto 0;
        padding: 1rem;
        background: #f03131;
        border-radius: 5px;
        color: #ffffff;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <form action="">
      <div class="item">
        <label for="">房屋总价（万元）</label>
        <input type="text" placeholder="请输入房屋总价" id="totalPrice" />
      </div>
      <div class="main"></div>
      <div class="button">提交</div>
    </form>
    <div class="resultWrap">
      <h2>公易贷前期成本结果：</h2>
      <span class="close">关闭</span>
      <div class="result"></div>
      <span class="close2">关闭</span>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
      var baseUrl = "https://rhtm.jfzh.com.cn/mini/";
      // var baseUrl = "https://rht-admin-test.jfzh.com.cn/mini/";
      var totalPrice = null;
      $(".close,.close2").click(function () {
        $("form")[0].reset();
        $(".resultWrap").hide();
      });
      $(".button").click(function () {
        totalPrice = $("#totalPrice").val();
        let data = {
          customerId: "",
          optionIds: [],
          totalPrice,
          type: "public_credit",
        };
        $("select option:selected").each(function () {
          data.optionIds.push($(this).val());
          console.log();
        });
        console.log("选择个数：" + data.optionIds);
        data.optionIds.splice(1, 1);
        console.log("选择个数：" + data.optionIds);

        if (!totalPrice) {
          alert("请输入房屋总价");
          return;
        }

        if (data.optionIds.includes("请选择")) {
          alert("请选完题目再提交");
        } else {
          optionSubmit(data);
        }

        // console.log(data.optionIds)
      });
      result(); //初始化问题

      $("#s54").change(function () {
        var id = $(this).val();
        var len = $(".main .item").length;
        var html = getOption(id);

        if (len == 2) {
          $(".main").append(html);
        } else {
          $(".main").find(".item").last().remove();
          $(".main").append(html);
        }
      });

      // 初始问题列表
      function result() {
        var result = null,
          html = "";
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: baseUrl + "question/list?type=public_credit",
          cache: false,
          // data: JSON.stringify(datas), //重点必须为一个变量如：data
          dataType: "json",
          async: false,
          success: function (data) {
            // console.log(data.data);
            result = data.data;
            result.forEach(function (el) {
              html += `<div class="item">
                            <label>${el.title}</label>
                            <select id="s${el.id}">
                                <option value="请选择" selected disabled>请选择</option>
                        `;
              el.optionList.forEach(function (ele) {
                html += `
                                <option value="${ele.id}">${ele.title}</option>
                                `;
              });

              html += "</select></div>";

              $(".main").html(html);
            });
          },
        });
        return html;
      }
      // 选项对应问题
      function getOption(oid) {
        var result = null,
          html = "";
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: baseUrl + "question/getOptionQuestion?oid=" + oid,
          // url: baseUrl + "question/getOptionQuestion?oid=o1",
          cache: false,
          dataType: "json",
          async: false,
          success: function (data) {
            // console.log(data.data);
            result = data.data;
            result.forEach(function (el) {
              html += `<div class="item">
                            <label>${el.title}</label>
                            <select id="s${el.id}">
                              <option value="请选择" selected disabled>请选择</option>
                        `;
              el.optionList.forEach(function (ele) {
                html += `
                                <option value="${ele.id}" data-sub="${ele.hasSub}">${ele.title}</option>
                                `;
              });

              html += "</select></div>";
            });
          },
        });
        return html;
      }
      // 提交结果
      function optionSubmit(data) {
        var result = null,
          html = "";
        $.ajax({
          contentType: "application/json",
          type: "post",
          url: baseUrl + "answer/optionSubmit",
          cache: false,
          data: JSON.stringify(data), //重点必须为一个变量如：data
          dataType: "json",
          async: false,
          success: function (data) {
            console.log(data.data);
            var data = data.data,
              cList = data.canBackconclusionResultItems,
              RList = data.conclusionResultItemLists,
              html = "";
            console.log(cList);
            console.log(RList);
            html += `
                    <div class="fsc mb20">
                        <image src="img/money.svg" class="money"></image>
                        贷款总额：￥${totalPrice}0000
                    </div>
                `;
            if (data.totalCost > 0) {
              html += `
                  <div class="mb20" style="display:block;">
                      <div class="fsc">
                          <image src="img/money.svg" class="money"></image>
                          您前期共需要准备(不包含首付款)：
                          <div class="total_price ml30">￥${data.totalCost}</div>
                      </div>
                      
                  </div>
                  `;
            }
            if (data.noteCost) {
              html += `
                  <div class="mb20">
                    <div class="fsc">
                        <image src="img/money.svg" class="money"></image>
                        其中存款类为：
                    </div>
                  `;
            }
            cList.forEach(function (el, index) {
              html += `<div class="fs28 fsc">
                            <div class="fc-2">${index + 1}.${
                el.conclusion
              } </div>
                  `;
              if (el.cost !== "-1" && el.cost !== "-1.0") {
                html += `<div class="bold ml30">￥${el.cost}</div>`;
              }
              html += `</div>`;
            });
            html += "</div>";
            if (data.noteCost) {
              html += `<div class="fsc">
                            <image src="img/money.svg" class="money"></image>
                            其中您付出成本：<div class="total_cost">￥${data.noteCost}</div>
                        </div>
                  `;
            }

            RList.forEach(function (el, index) {
              html += `<div class="fsc">
                                  <div class="label_info">${index + 1}. ${
                el.conclusion
              } </div>
                              `;
              if (el.cost != "-1" && el.cost != "-1.0") {
                html += `<div class="cost_info"> ￥${el.cost}</div>`;
              }
              html += "</div>";
            });
            html += `<div  class="warning">注：以上费用测算仅供参考，一切以办理时的实际状况为准。</div>
                `;

            $(".result").html(html);
            $(".resultWrap").show();
          },
        });
      }
    </script>
  </body>
</html>
